<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<title>APP</title>
		<link rel="stylesheet" type="text/css" href="../css/api.css" />
		<link rel="stylesheet" type="text/css" href="../css/common.css" />
		<style>
			#con {
				margin: 10px;
				font-size: 28px;
			}
			ul {
				margin-bottom: 10px;
			}
			.txt {
				margin: 5px 10px;
				padding: 5px;
				color: #000;
				word-wrap: break-word;
			}
			* {
				margin: 0;
				padding: 0;
				border-width: 0;
			}
			body {
				text-align: center;
				background-color: black;
			}
			/*canvas {
			 background-color: black;
			 position: absolute;
			 }*/
			canvas {
				left: 0;
				top:0;
				margin: 0;
				width: 350px;
				height: 400px;
				position: absolute;
				background-color: black;
				border: 1px solid #ddd;
			}
			.spirit {
				position: absolute;
				width: 5px;
				height: 5px;
				background-color: red;
			}
			.homeFooter {
				position: fixed;
				bottom: 0;
				height: 45px;
				width: 100%;
				box-sizing: border-box;
				display: block;
				background-color: #fff;
			}
			.homeFooter > nav, .homeFooter > nav > ul {
				height: 100%;
			}
			.homeFooter > nav > ul {
				-webkit-box-orient: horizontal;
				padding: 5px;
				border-top: 1px solid #ddd;
				white-space: nowrap;
				text-align: center;
				list-style-type: none;
			}
			.homeFooter > nav > ul > li {
				display: block;
				float: left;
				width: 32%;
				padding: 2px;
			}
			.homeFooter > nav > ul > li > span:active {
				color: rgba(0,135,233,1);
				height: 30px;
				line-height: 30px;
				font-size: 1.0em;
				font-weight: 600;
			}
			.homeFooter > nav > ul > li > span {
				color: rgba(99,194,233,1);
				height: 30px;
				line-height: 30px;
				font-size: 1.0em;
				font-weight: 600;
			}
			.homeFooter > nav > ul > li > h2 {
				font-size: 1.0em;
				font-weight: 600;
				color: rgba(99,194,233,1);
			}
		</style>
	</head>
	<body>
		<canvas id='contain'></canvas>
		<footer class="homeFooter">
			<nav>
				<ul>
					<li id="activeId" tapmode=""  onclick="api.closeWin()">
						<span class="am-icon-sm6  am-icon-back">返回</span>
					</li>
					<li onclick="Init()" tapmode="">
						<span class="am-icon-sm6  am-icon-cut">清除</span>
					</li>
					<li tapmode="" onclick="Save()">
						<span class="am-icon-sm6  am-icon-picture-o" >保存</span>
					</li>
				</ul>
			</nav>
		</footer>
	</body>
	<script type="text/javascript" src="../script/api.js"></script>
	<!--<script type="text/javascript" src="../script/touch.js"></script>
	<script type="text/javascript" src="../script/picture.js"></script>-->
	<script type="text/javascript">
		var canvas = null;
		var width = 0;
		var height = 0;
		var canvas = document.getElementById("contain");
		var ctx = canvas.getContext("2d");
		var spirit;
		var startX;
		var startY;
		var count = 0;
		var ts = 0;
		var px = [];
		var py = [];
		var pp = [];
		var pt = [];
		var dx, dy;
		    // touch start listener  
		function touchStart(event) {
		    event.preventDefault();
		    if (spirit ||! event.touches.length) return;
		    var touch = event.touches[0];
		    startX = touch.pageX;
		    startY = touch.pageY;
		    spirit = document.createElement("div");
		    spirit.className = "spirit";
		    spirit.style.left = startX;
		    spirit.style.top = startY;
		canvas.appendChild(spirit);
		//         $api.append(canvas,spirit);
		//var tt=1;
		ctx.strokeStyle = "#2f4b26";
		ctx.lineJoin = "round";
		ctx.lineWidth = 1;
		if(count==0)
		{
		ts=new Date();
		tt=0;
		}
		//ctx.MoveTo(touch.pageX, touch.pageY);
		ctx.beginPath();
		ctx.moveTo(touch.pageX, touch.pageY);
		var x=	touch.pageX;
		var y=	touch.pageY;
		px.push(x);
		py.push(y);
		pp.push(0);
		pt.push(0);
		log(touch,0);
		};
		canvas.addEventListener("touchstart", touchStart, false);
		//$api.addEvt(canvas, "touchstart", touchStart, false);
		function touchMove(event){
		    event.preventDefault();
		//if (spirit ||! event.touches.length) return;
		if (! event.touches.length) return;
		    var touch = event.touches[0];
		var x= touch.pageX-startX;
		var y = touch.pageY-startY;
		var tm=new Date();
		//alert(ctx);
		if(count==0)
		{
		ts=tm;
		//ctx.beginPath();
		//ctx.moveTo(touch.pageX, touch.pageY);
		}
		else
		{
		var oldx=px[px.length-1];
		var oldy=py[py.length-1];		
		ctx.beginPath();
		ctx.moveTo(oldx,oldy);
		ctx.lineTo(touch.pageX, touch.pageY );
		ctx.closePath();
		ctx.stroke();		
		ctx.restore();
		
		ctx.fillStyle = "#8f4b26";
		ctx.beginPath();
		ctx.arc(touch.pageX, touch.pageY ,2,0,2*Math.PI);
		ctx.closePath();
		ctx.fill();
		
		
		}
		
		//
		//ctx.lineTo(touch.pageX, touch.pageY );
		
		var tt=tm.getTime()-ts.getTime();
		px.push(touch.pageX);
		py.push(touch.pageY);
		pp.push(1);
		pt.push(tt);
		count=count+1;
		spirit.style.webkitTransform = "translate(" + x + "px," + y + "px)";	
		
		log(touch,tt);
		}
		
		function log(touch,tt)
		{
		console.log("No."+count+",当前offx值为:" +parseInt(touch.pageX) + ", 当前offy值为:" + parseInt(touch.pageY)  + ","+tt);
		console.log("No."+count+",当前offx值为:" +parseInt(touch.clientX) + ", 当前offy值为:" + parseInt(touch.clientY)  + ","+tt);
		console.log("No."+count+",当前offx值为:" +parseInt(touch.screenX) + ", 当前offy值为:" + parseInt(touch.screenY)  + ","+tt);
		}
		canvas.addEventListener("touchmove", touchMove, false);
		//$api.addEvt(canvas, "touchmove", touchMove, false);
		function touchEnd(event) {
		if(!spirit) return;
		contain.removeChild(spirit);
		spirit = null;
		//if (! event.touches.length){
		//alert("结束");
		//return};
		//    var touch = event.touches[0];
		var tm=new Date();
		var tt=tm.getTime()-ts.getTime();
		if(px.length<=0)
		return;
		var x=px[px.length-1];
		var y=py[py.length-1];
		px.push(x);
		py.push(y);
		pp.push(0);
		pt.push(tt);
		console.log("结束:"+count+",当前offx值为:" + parseInt(x*100)/100.0 + ", 当前offy值为:" +parseInt(y*100)/100.0  + ","+tt);
		}
		canvas.addEventListener("touchend", touchEnd, false);
		//$api.addEvt(canvas, "touchend", touchEnd, false);
		canvas.style.webkitTransition = 'all ease 0.05s';
		var count = 0;
		var ts = 0;
		var px = [];
		var py = [];
		var pp = [];
		var pt = [];
		var dx, dy;
		function Init()
		{
			count = 0;
			ts = 0;
			px = [];
			py = [];
			pp = [];
			pt = [];

		canvas.width=370;
		canvas.height=400;
		
		ctx=canvas.getContext("2d");
		ctx.clearRect(0,0,300,400);
			
		ctx.strokeStyle = "#df4b26";
		ctx.lineJoin = "round";
		ctx.lineWidth = 1;
		
		console.log(canvas.width+','+canvas.height);
		
			for(var i=1;i<=8;i++)
			{		
				ctx.moveTo(0,50*i);
				ctx.lineTo(canvas.width,50*i);				
			}
			for(var i=1;i<=7;i++)
			{		
				ctx.moveTo(50*i,0);
				ctx.lineTo(50*i,canvas.height);			
			}
			ctx.stroke();
		}
		function Save()
		{
		var str="";
		for(var i=0;i<px.length;i++)
		{
		str+=parseInt(px[i]*100)/100.0+','+parseInt(py[i]*100)/100.0+','+pp[i]+','+pt[i]+"\r\n";
		}
		alert(str);
		console.log(str);
		//Init();
		}
		apiready = function() {
		var winH = api.winWidth;
		var winW = api.winHeight;
		//contain.width=winW;
		//contain.height=winH-50;
		};
	</script>
</html>